<template>
	<view>
	  <view class="yhupopview">
		<u-popup v-model="dishow" mode="bottom" @close="popclose(2)" width="100%" :closeable="true" z-index="1000">
			<view class="yhpop">
				<view>
					<!-- <view class="uni-padding-wrap">
						<view class="uni-title">{{province[value[0]].shortname}}-{{city[value[1]].shortname}}-{{area[value[2]].shortname}}</view>
					</view> -->
					<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in province" :key="index">{{item.shortname}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in city" :key="index">{{item.shortname}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in area" :key="index">{{item.shortname}}</view>
						</picker-view-column>
					</picker-view>

					<view class="quedin" @click="adressbtn">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
	 
	</view>
  </template>
   
  <script>
  export default {
	props: {
		dishow: {
			type: Boolean,
			default: false
		},
	
	},
	  data() {
			return {
				value: [0,0, 0],
				valuetwo: [0,0, 0],
				visible: true,
				indicatorStyle: `height: 50px;`,
				// dishow:true,
				adress:{},
				province:[],
				city:[],
				area:[]
			}
	  },
	  created(){
		this.getadress()
	  },
	  methods: {
		async getadress(){
			let res = await this.$u.api.regionall({
			});
			// console.log(res)
			this.adress = res
			this.province = res
			this.city = res[0].children
			this.area = res[0].children[0].children
		},
		bindChange: function (e) {
			console.log(e)
			const val = e.detail.value
			// console.log(this.value)
			console.log(this.value[1])
			console.log(val[1])
			if(this.value[0]!=val[0]){
				//省动了
				// this.province = this.adress[val[0]]
				console.log(this.adress[val[0]])
				this.city = this.adress[val[0]].children
				console.log(this.city)
				this.area = this.adress[val[0]].children[0].children
				this.value = val
				return false;
			}
			if(this.value[1]!=val[1]){
				//市动了
				// this.province = this.adress[val[0]]
				// console.log(this.adress[val[0]])
				// this.city = this.adress[val[0]].children
				// console.log(this.city)
				this.area = this.adress[val[0]].children[val[1]].children
				console.log(this.area)
				this.value = val
				return false;
			}
			this.value = val
			// this.year = this.years[val[0]]
			// this.month = this.months[val[1]]
			// this.day = this.days[val[2]]
		},
		popclose(){
			this.$emit("adressclose");
		// this.dishow = false
		},
		adressbtn(){
			let info = {
				province:this.province[this.value[0]].shortname,
				provinceid:this.province[this.value[0]].id,
				city:this.city[this.value[1]].shortname,
				cityid:this.city[this.value[1]].id,
				area:this.area[this.value[2]].shortname,
				areaid:this.area[this.value[2]].id,
			}
			this.$emit("adressbtn",info);
			this.$emit("adressclose");
		}
	  }
  }
</script>

   
  <style scoped lang="scss">
  .picker {
	padding: 10px;
	background-color: #fff;
	text-align: center;
  }
  .picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}
	.quedin{
		height: 88rpx;
		background: #496EE7;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		margin: 30rpx ;
	}
  </style>
  